import * as React from "react";
import { withRouter, Link, RouteComponentProps } from "react-router-dom";
import Richer from "../../components/Richer";
import style from "./style.less";
import Rich from "../../mobx/richer";

export interface richer {
  id: string
  nickname: string
  avatar: string
  worth: number
}

interface ri {
  data : richer[]
}
class Index extends React.Component<RouteComponentProps,ri> {


 constructor(props) {
    super(props);
    this.state = ({
      data : []
    })
  }
  async richsearch(){
    let url = '/api/web/rich/search';
    let obj = {}
    obj["pageIndex"] = 0;
    obj["pageSize"] = 0;
    obj["keyword"] = '';
    try {
      let response = await fetch(url,{
        method:'POST',
        mode:'cors',
        headers: {//请求头
          'Content-Type': 'application/json'
        },
        body:JSON.stringify(obj),
      });
      let res= await response.json();
      let r = []
      if (r.length > 0)
        r = []
      if(res.stat === 'ok'){
        res.data.items.map(data => {
          let rich:richer = {
            id : data.id,
            nickname: data.nickname,
            avatar : data.avatar,
            worth :data.worth
          }
          r.push(rich)
        })
        this.setState({
          data : r
        })
      }
      else{
        alert(res.msg)
      }
    }
    catch(error){
      console.log(error);
    }
  }

  componentDidMount() {
    this.richsearch()
  }

  render() {
    return (
      <React.Fragment>
        <div className={style.container}>Neal.fun</div>
        <div className={style.main}>
          {this.state.data.length == 0 ? (
            <span>
              <h1 style={{marginTop:'100px',textAlign:'center'}} >富豪正在创建中...</h1>
            </span>
          ) : (
            <span></span>
          )}

          {/* {
            this.state.data.length == 1 ? ()=>{
              Rich.setnickname(this.state.data[0].nickname)
              Rich.setavatar(this.state.data[0].avatar)
            this.props.history.push("/home")
          } : (
            <span></span>
          )
          } */}

          {this.state.data.length > 0 ? (
              <>
            <div className={style.mainer}>
              <div className={style.center}>
              {this.state.data.slice(0,3).map((rich) => (
                <Link onClick={()=>{
                  Rich.setavatar(rich.avatar)
                  Rich.setnickname(rich.nickname)
                  Rich.setworth(rich.worth.toString())
                  Rich.setnowworth(rich.worth.toString())
                  localStorage.setItem("name",rich.nickname)
                  localStorage.setItem("avatar",rich.avatar)
                  localStorage.setItem("worth",rich.worth.toString())
                  localStorage.setItem("nowworth",rich.worth.toString())
                  localStorage.setItem("id",rich.id)
                }} to='/home'>
                  <Richer rich={rich} key={rich.id}></Richer>
                </Link>
              ))}
              </div>
            </div>
                <h1 className={style.tips}>请选择你的身份</h1>
              </>
          ) : (
            <span></span>
          )}
          {/*<h1 className={style.tips}>请选择你的身份</h1>*/}
        </div>
      </React.Fragment>
    );
  }
}

export default withRouter(Index);
